<template>
  <div>
    <NuxtLayout name="app">
      <el-scrollbar class="h-full">
        <div
          class="index-page pt-[33px] w-[920px] flex flex-col items-center mx-auto"
          :style="{
            'background-image': `url(${indexBg})`,
          }"
        >
          <div class="bot">
            <div class="bot-content text-[#fff] text-[10px]">
              你的智能人工助手
            </div>
          </div>
          <div
            class="my-[20px] text-center text-[36px] text-[var(--color-btn-text)] font-medium"
          >
            欢迎来到猫头鹰AI
          </div>
          <div class="text-[14px] text-[var(--color-btn-text)]">
            AI对话、写作、绘图、图片处理...
          </div>
          <div class="nav mt-[23px] w-full flex justify-between items-center">
            <div class="nav-item rounded-[8px] w-[398px] h-[210px]">
              <div
                class="w-full h-full content"
                style="background-color: rgba(18, 19, 24, 0.4)"
              >
                <div class="title">AI艺术家</div>
                <div class="text">无需魔法，点开即用</div>
                <NuxtLink to="/app/drawing">
                  <div class="btn">
                    <el-image
                      class="w-[24px] h-[24px] mr-[4px]"
                      :src="iconDrawing"
                    ></el-image>
                    <span>画一画</span>
                  </div>
                </NuxtLink>
              </div>
            </div>
            <div class="nav-item rounded-[8px] w-[398px] h-[210px]">
              <div
                class="w-full h-full content"
                style="background-color: rgba(18, 19, 24, 0.4)"
              >
                <div class="title">AI对话大师</div>
                <div class="text">先进模型，智能体验</div>
                <NuxtLink to="/app/chatting?id=1">
                  <div class="btn">
                    <el-image
                      class="w-[24px] h-[24px] mr-[4px]"
                      :src="iconChatting"
                    ></el-image>
                    <span>聊一聊</span>
                  </div>
                </NuxtLink>
              </div>
            </div>
          </div>
          <div class="mt-[52px] text-[24px] text-[#fff]">
            <span class="text-[#F86E07]">使用猫头鹰AI，</span>你可以...
          </div>
          <div
            class="mt-[14px] px-[6px] py-[5px] h-[54px] rounded-[27px] bg-[var(--el-bg-color-base)]"
          >
            <div
              class="flex h-full text-center bg-[var(--el-bg-color-base)] rounded-[22px]"
            >
              <div
                v-for="item in switchList"
                :key="item.id"
                class="bg-[var(--el-bg-color-page)] flex rounded-[22px]"
              >
                <div
                  @click="active = item.id"
                  :style="{
                    'border-color':
                      active === item.id
                        ? 'var(--el-color-primary)'
                        : 'var(--el-bg-color-base)',
                  }"
                  class="cursor-pointer switch w-[100px] bg-[var(--el-bg-color-base)] flex items-center rounded-[22px] justify-center text-[var(--color-btn-text)]"
                >
                  <el-image
                    class="w-[24px] h-[24px] mr-[4px]"
                    :src="item.icon"
                  ></el-image
                  >{{ item.name }}
                </div>
                <div v-if="active === item.id" class="flex-1 flex">
                  <div
                    v-for="item1 in item.list"
                    :key="item1.id"
                    class="cursor-pointer switch-r w-[100px] flex pt-[14px] rounded-[22px] justify-center text-[var(--color-btn-text)]"
                  >
                  <img v-if="item1.name === '数字助手'" class="h-[14px] mr-[4px]" :src="item1.icon" alt="" srcset="">
                  <img v-else class="h-[12px] mr-[4px]" :src="item1.icon" alt="" srcset=""><span style="line-height: 1em;">{{ item1.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="window px-[68px] py-[22px] mt-[16px] w-[920px] h-[550px] flex flex-col items-center bg-[var(--el-bg-color-base)] rounded-[8px]"
          >
            <div class="title text-[#8B8E92] text-[18px] mb-[20px]">
              多模型对话平台打造流畅、自然的AI对话体验能。
            </div>
            <div
              class="w-[790px] px-[16px] py-[20px] h-[408px] rounded-[14px] bg-[var(--el-bg-color-page)]"
            >
              <img class="w-full h-full" :src="switchList[active].bg" />
            </div>
            <NuxtLink :to="active ? '/app/chatting?id=0' : '/app/drawing?page=MJ'">
            <div
              class="btn cursor-pointer mt-[12px] flex text-[var(--color-btn-text)] justify-center items-center rounded-[8px] w-[167px] h-[41px] bg-[var(--el-color-primary)]"
            >
              <span style="line-height: 1em">{{
                active ? "开始对话" : "开始创作"
              }}</span>
              <el-icon :size="20" color="var(--color-btn-text)"
                ><Right
              /></el-icon>
            </div>
          </NuxtLink>
          </div>
        </div>
      </el-scrollbar>
    </NuxtLayout>
  </div>
</template>
<script lang="ts" setup>
import SD from '@/assets/images/icon_SD_base.png'
import MJ from '@/assets/images/Icon_MJ.png'
import indexBg from "@/assets/images/index/index-bg.png";
import indexChatting from "@/assets/images/index/index-chatting.png";
import chattingBg from "@/assets/images/index/chatting-bg.png";
import darwingBg from "@/assets/images/index/darwing-bg.png";
import iconChatting from "@/assets/images/index/icon-chatting.png";
import iconDrawing from "@/assets/images/index/icon-drawing.png";
import iconDialog from "@/assets/images/index/icon-dialog.png";
import iconPlay from "@/assets/images/index/icon-play.png";
import { useUserStore } from "~~/stores/user";
import feedback from "~~/utils/feedback";
import { ElMessageBox } from "element-plus";
import { useAppStore } from "~/stores/app";
import { Right } from "@element-plus/icons-vue";

const userStore = useUserStore();
const appStore = useAppStore();
const router = useRouter();
const route = useRoute();
const switchList = ref([
  {
    name: "创作",
    icon: iconChatting,
    bg: darwingBg,
    id: 0,
    list: [
      {
        name: "MJ",
        id: 0,
        icon: MJ,
      },
      {
        name: "SD",
        id: 0,
        icon: SD,
      },
    ],
  },
  {
    name: "对话",
    icon: iconDialog,
    bg: chattingBg,
    id: 1,
    list: [
      {
        name: "数字助手",
        id: 0,
        icon: indexChatting,
      },
    ],
  },
]);
const active = ref(1);
</script>
<style lang="scss" scoped>
.index-page {
  background-repeat: no-repeat;
  background-size: "920px 360px";
  .bot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 112px;
    height: 26px;
    background: linear-gradient(
      94deg,
      #ff4343 0%,
      #f8ea9b 24%,
      #6ff0ba 53%,
      #667df6 88%,
      #e269dd 100%
    );
    border-radius: 13px;
    &-content {
      width: 110px;
      height: 24px;
      z-index: 10;
      background-color: rgba(18, 19, 24, 0.6);
      border-radius: 12px;
      text-align: center;
      line-height: 24px;
    }
  }

  .nav {
    &-item {
      opacity: 0.95;
      &:first-child {
        background: linear-gradient(
            167deg,
            #9d3aff 2%,
            rgba(157, 58, 255, 0) 28%
          ),
          linear-gradient(189deg, #3affac 2%, rgba(58, 125, 255, 0) 34%),
          rgba(38, 41, 50, 0.9);
      }
      &:last-child {
        background: linear-gradient(
            167deg,
            #ffbc3a 2%,
            rgba(255, 247, 58, 0) 28%
          ),
          linear-gradient(189deg, #ff3a3a 2%, rgba(255, 188, 58, 0) 34%),
          rgba(38, 41, 50, 0.9);
      }

      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
          margin-top: 39px;
          font-size: 24px;
          color: #fff;
        }
        .text {
          margin: 32px 0 21px;
          font-size: 14px;
          color: var(--color-text-base);
        }

        .btn {
          cursor: pointer;
          width: 186px;
          height: 34px;
          border-radius: 6px 6px 6px 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid var(--color-text-base);
          color: #f86e07;
        }
      }
    }
  }

  .switch {
    border: 2px solid var(--el-bg-color-base);
  }
  .switch-r {
    border: 2px solid var(--el-bg-color-page);
  }
}
</style>
